import React, { useRef } from "react";
import {
    Input,
    Modal,
    Form,
    message,
    Col,
    Row,
  } from "antd";
import { InfoCircleOutlined } from '@ant-design/icons'
import CaptchaButton from "./components/captchaButton";

interface IProps {
    bindEmailOpen: boolean,
    accountName: string,
    dispatch: (args: any) => void;
    fetchCode: () => void;
}

const BoundEmail = (props: IProps) => {
    const { bindEmailOpen, accountName, dispatch, fetchCode } = props;
    const [form] = Form.useForm();

    // 邮箱验证码请求
    const sendEmailCaptcha = async () => {
        let values = await form.validateFields(['email']);
        return dispatch({
            type: 'login/sendEmailCode',
            payload: { email: values.email, userName: accountName }
        })
    }

    const handleOk = async () => {
        let values = await form.validateFields();
        dispatch({
            type: 'login/checkEmailCode',
            payload: {
                email: values.email,
                userName: accountName,
                captcha: values.captcha
            },
            callback: (result: any) => {
                 if(result.code === '0') {
                    message.success('邮箱绑定成功');
                    handleCancel();
                }
            }
        })
    }

    const handleCancel = () => {
        form.resetFields();
        dispatch({
            type: 'login/save',
            payload: { bindEmailOpen: false }
        });
        fetchCode();
    }

    return (
        <Modal
            title="邮箱绑定"
            open={bindEmailOpen}
            onOk={handleOk}
            onCancel={handleCancel}
            width={600}
            okText="提交"
        >
            <Row style={{display: 'flex', marginBottom: '10px'}}>
                <Col style={{width: '20px'}}>
                    <InfoCircleOutlined />
                </Col>
                <Col style={{flex: 1}}>
                <p>
                    <span>由于信息安全要求，请先绑定邮箱</span>
                </p>
                </Col>
            </Row>
            <Form
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                form={form}
            >   
                <Form.Item 
                    label="邮箱"
                    name='email'
                    rules={[
                        {
                            required: true, message: '请输入邮箱！'
                        },
                        {
                            type: 'email',
                            message: '邮箱格式不正确'
                        }
                    ]}    
                >
                    <Input
                        size="large"
                        placeholder="请输入邮箱！" 
                    />
                </Form.Item>
                <Form.Item
                    label="验证码"
                    name='captcha'
                    rules={[
                        {
                            required: true, message: '请输入验证码'
                        },
                        {
                            pattern: /^[A-Za-z\d]{4}$/,
                            message: '请输入4位包含数字或字母的验证码'
                        }
                    ]}  
                >
                    <Input
                        size="large"
                        placeholder="请输入邮箱验证码！"
                        addonAfter={
                            <CaptchaButton
                                sendEmailCaptcha={sendEmailCaptcha}
                            />
                        }
                        onPressEnter={handleOk}
                    />
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default BoundEmail;
